<template>
    <div class="app-container">
      <div class="echarts">
        <div ref="schoolMembersChart" class="schoolMembersChart"></div>
        <div ref="childcareChart" class="childcareChart"></div>
        <div ref="staffAndchildChart" class="staffAndchildChart"></div>
        <div ref="educationChart" class="educationChart"></div>
        <div ref="workYearChar" class="workYearChar"></div>
        <div ref="jobTitleChart" class="jobTitleChart"></div>
        <div ref="payChar" class="payChar"></div>
        <div ref="insuranceChart" class="insuranceChart"></div>
      </div>
    </div>
  </template>
  
  <script>
  import {staffList,educationList}from "@/api/qu/teachers";
  export default {
    name: "TeachersTJ",
    data() {
      return {
        educationOptions:[],
        schoolMembersChart:null,
        schoolMembersList:[
          {name:'教师',value:'102'},
          {name:'保育员',value:'220'},
          {name:'卫生保健员',value:'205'},
        ],
        staffAndchildChart:null,//教职工占比
        staffAndchildList:[
        ],
        childcareChart:null, // 保育人员占比
        childcareChartList:[
          {name:'城区园',value:'60'},
          {name:'乡镇园',value:'50'},
          {name:'农村园',value:'40'},
          {name:'公办园',value:'50'},
          {name:'民办园',value:'60'},
        ],
        educationChart:null,
        educationChartList:[
        ],
        jobTitleChart:null,
        jobTitleChartList:[
          {name:'高级教师',value:1000},
          {name:'一级教师',value:1500},
          {name:'二级教师',value:1500},
        ],
        // 薪资水平
        payChar:null,
        payCharList:[
          {name:'<3000',value:'30'},
          {name:'3000~5000',value:'40'},
          {name:'>5000',value:'30'},
        ],
        //工作年限统计
        workYearChar:null,
        workYearList:[
          {name:'<1年',value:'10'},
          {name:'1~3年',value:'15'},
          {name:'3~5年',value:'35'},
          {name:'5~10年',value:'30'},
          {name:'>10年',value:'10'},
        ],
        //五险一金统计情况
        insuranceChart:null,
        insuranceData:80
        
      };
    },
    created() {
      // this.getList();
      this.getDicts("base_education").then(response => {
      this.educationOptions = response.data;
      // console.log(this.educationOptions);
    });
    },
    mounted(){
     this.schoolMembersChart = this.$echarts.init(this.$refs.schoolMembersChart);
     this.childcareChart = this.$echarts.init(this.$refs.childcareChart);
     this.staffAndchildChart = this.$echarts.init(this.$refs.staffAndchildChart);
     this.workYearChar = this.$echarts.init(this.$refs.workYearChar); //工作年限统计
     this.educationChart = this.$echarts.init(this.$refs.educationChart);
     this.jobTitleChart = this.$echarts.init(this.$refs.jobTitleChart);
     this.payChar = this.$echarts.init(this.$refs.payChar);  //薪资水平统计
     this.insuranceChart = this.$echarts.init(this.$refs.insuranceChart);  //五险一金统计分析
    //  this.staffAndchildFun();
     this.schoolMembersFun();
     this.getstaffList();
     this.geteducationList();
     this.childcareChartFn();
     this.jobTitleCharFun();
     this.payCharCharFun();
     this.workYearCharFun();
     this.insuranceChartFun()
   },
    methods: {
      //教职工比数据
     async getstaffList(){
         try {
           const data = await staffList();
           this.staffAndchildList=data.rows.map(item=>{
            return {
              name:item.typeName,
              value:item.staffPro
            }
           });
           this.staffAndchildFun();
         } catch (error) {
           console.log(error);
         }
      },
      //教职工学历统计数据
      async geteducationList(){
        this.educationChartList=[]
        try {
           const {data} =  await educationList();
           for(let key in data){
               this.educationChartList.push({ name:key,value:data[key]})
            }
           this.educationCharFun()
        } catch (error) {
          console.log(error);
        }
      },
      schoolMembersFun(){
            const option = {
           // backgroud:'#333',
           title: {
             text: '教职工情况',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                //  rotate:30,
                 interval: 0,//使x轴文字显示全
                },
                data: this.schoolMembersList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: "单位: 个",
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    // name: '入园人数',
                    type: 'bar',
                    // stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth:'48%',
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.schoolMembersList
                },
               
            ]
            }
              // 使用刚指定的配置项和数据显示图表
              this.schoolMembersChart.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
      },
      staffAndchildFun(){
            const option = {
           // backgroud:'#333',
           title: {
             text: '教职工与幼儿比情况',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                //  rotate:30,
                 interval: 0,//使x轴文字显示全
                },
                data: this.staffAndchildList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: "单位: %",
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    // name: '入园人数',
                    type: 'bar',
                    // stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth:'48%',
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.staffAndchildList
                },
               
            ]
            }
              // 使用刚指定的配置项和数据显示图表
              this.staffAndchildChart.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
      },
      workYearCharFun(){
            const option = {
           // backgroud:'#333',
           title: {
             text: '工作年限统计',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                //  rotate:30,
                 interval: 0,//使x轴文字显示全
                },
                data: this.workYearList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: "单位: %",
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    // name: '入园人数',
                    type: 'bar',
                    // stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth:'48%',
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.workYearList
                },
               
            ]
            }
              // 使用刚指定的配置项和数据显示图表
              this.workYearChar.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
      },
      childcareChartFn(){
        const option = {
           // backgroud:'#333',
           title: {
             text: '保育员与幼儿比情况',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                //  rotate:30,
                 interval: 0,//使x轴文字显示全
                },
                data: this.childcareChartList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: "单位: %",
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    type: 'bar',
                    // stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth:'46%',
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15,
                    },
                    data: this.childcareChartList
                },
               
            ]
            }
              // 使用刚指定的配置项和数据显示图表
              this.childcareChart.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
      },
      //学历统计
      educationCharFun(){
         const  option = {
           title: {
             text: '学历统计',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
             trigger: 'item',
          //    formatter: function (params) {
          //     // console.log(params);
          //    return params.name+':'+params.value+'%';
          //  },
           },
           legend: {
            //  type: 'scroll',
            //  orient: 'vertical',
             left: 'right',
             top: 0,
             bottom: 0,
            
           },
           grid: {
            top:5,
           left: '1%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
           series: [
             {
               name: '',
               type: 'pie',
               radius: '70%',
               center: ['50%', '50%'],
               data:this.educationChartList,
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
             }
             ]
          };
            //  this.rateChart.off("click");
            //  this.rateChart.on('click',(e)=>{ 
            //     console.log(e);
            //  })
          this.educationChart.setOption(option);
          window.addEventListener("resize", this.monitorResize);
      },
      jobTitleCharFun(){
        const option = {
         tooltip: {
           trigger: 'item',
        },
        title: {
             text: '教师职称统计',
            //  subtext: '纯属虚构',
             left: 'left'
           },
         legend: {
           type: 'scroll',
           orient: 'vertical',
           right: 0,
           top: 20,
          //  bottom: 20,
           
         },
         grid: {
          top:'1',
          left: "1%",
          right: "2%",
          bottom: "1%",
        //   containLabel: true,
        },
         series: [
           {
            //  name: '幼儿入园情况',
             type: 'pie',
             radius: ['40%', '70%'],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 10,
               borderColor: '#fff',
               borderWidth: 2
             },
             label: {
               show: false,
               position: 'center'
             },
            //  emphasis: {
            //    label: {
            //      show: true,
            //      fontSize: 40,
            //      fontWeight: 'bold'
            //    }
            //  },
             labelLine: {
               show: false
             },
             data: this.jobTitleChartList
           }
         ]
       };
       this.jobTitleChart.setOption(option);
       window.addEventListener("resize", this.monitorResize);
      },
      //薪资水平统计
      payCharCharFun(){
        const option = {
           // backgroud:'#333',
           title: {
             text: '教职工薪资水平统计',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                //  rotate:30,
                 interval: 0,//使x轴文字显示全
                },
                data: this.payCharList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: "单位: 人",
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    type: 'line',
                    // stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth:'46%',
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15,
                    },
                    data: this.payCharList
                },
               
            ]
            }
              // 使用刚指定的配置项和数据显示图表
              this.payChar.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
      },
      //薪资水平统计
      insuranceChartFun(){
        const option = {
                title: {
                   text: '五险一金统计情况',
                  //  subtext: '纯属虚构',
                   left: 'left'
                 },
                series: [
                  {
                    type: 'gauge',
                    progress: {
                      show: true,
                      width: 18
                    },
                    axisLine: {
                      lineStyle: {
                        width: 18
                      }
                    },
                    axisTick: {
                      show: false
                    },
                    splitLine: {
                      length: 15,
                      lineStyle: {
                        width: 2,
                        color: '#999'
                      }
                    },
                    axisLabel: {
                      distance: 25,
                      color: '#999',
                      fontSize: 20
                    },
                    anchor: {
                      show: true,
                      showAbove: true,
                      size: 25,
                      itemStyle: {
                        borderWidth: 10
                      }
                    },
                    title: {
                      show: false
                    },
                    detail: {
                      valueAnimation: true,
                      // fontSize: 80,
                      offsetCenter: [0, '80%']
                    },
                    data: [
                      {
                        value:this.insuranceData
                      }
                    ]
                  }
                ]
                };
              // 使用刚指定的配置项和数据显示图表
              this.insuranceChart.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
      },
         //地图监听窗口缩放事件
       monitorResize(){
        this.schoolMembersChart.resize();
        this.staffAndchildChart.resize();
        this.childcareChart.resize();
        this.educationChart.resize();
        this.jobTitleChart.resize()
        this.payChar.resize();
        this.workYearChar.resize();
        this.insuranceChart.resize();
      },
      
    }
  };
  </script>

  <style lang="scss" scoped>
    .echarts{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .schoolMembersChart{
            margin-bottom: 50px;
            width: 30%;
            height: 350px;
        }
        .childcareChart{
            margin-bottom: 50px;
            width: 30%;
            height: 350px;
        }
        .staffAndchildChart{
          margin-bottom: 50px;
            width: 30%;
            height: 350px;
        }
        .workYearChar{
          margin-bottom: 50px;
            width: 30%;
            height: 350px;
        }
        .educationChart{
            margin-bottom: 50px;
            width: 30%;
            height: 350px;
        }
        .jobTitleChart{
             margin-bottom: 50px;
             width: 30%;
             height: 350px;
        }
        .payChar{
            margin-bottom: 50px;
            width: 30%;
            height: 350px;
        }
        .insuranceChart{
            margin-bottom: 50px;
            width: 30%;
            height: 350px;
        }
    }
  </style>